<script setup>
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import {onMounted, ref} from "vue";
import {useMessage} from 'naive-ui'

const message = useMessage()
const router = useRouter()
const userStore = useUserStore()
//退出登录
const logout=()=>{
  //清除保存在userStore中的用户信息
  userStore.removeName()
  userStore.removeToken()
  userStore.removeRoleId()
  userStore.removeJobNumber()
  localStorage.removeItem('user')
  //跳转回登录页
  router.push('/login')
}
const value=ref("")
const getRole = () => {
  if(router.currentRoute.value.name === 'teachingProject') value.value = "教师"
  else if(router.currentRoute.value.name === "checkTeachingProject") value.value = "副院长"
}
getRole()
const options= [
  {
    label: "副院长",
    value: "副院长",
  },
  {
    label: "教师",
    value: "教师"
  }
]
//副院长切换角色
const ChangeRole = () => {
  if (value.value === "副院长") {
    router.push('/secretary-home');
    value.value = "副院长"
    message.success("切换至副院长")
  } else if (value.value === "教师") {
    router.push('/teacher-home');
    value.value = "教师"
    message.success("切换至教师")
  }
};

</script>

<template>
  <div class="status-bar">
    <span class="title">本科教学成果管理系统</span>
    <div class="profile">
      <n-space justify="end">
        <span style="margin-right: 1em;line-height: 34px">欢迎，{{ userStore.name }}</span>
        <div class="changeRole" style="width: 100px" v-if="userStore.roleId === 3">
          <n-select v-model:value="value" :options="options" @update:value="ChangeRole" class="selectRole"/>
        </div>
        <n-button quaternary @click="logout">退出登录</n-button>
      </n-space>
    </div>
  </div>
</template>


<style scoped>
.status-bar{
  width: auto;
  height: 100px;
  background: linear-gradient(to right, rgb(5,93,163), rgb(255,255,255));
  display: flex;
  align-items: center;
  padding: 10px;
  color: rgba(22, 22, 22, 0.619);
}
img{

  height:90px;
  margin-left: 30px;

}
.title{
  margin-left:20px ;
  width:400px;
  line-height: 50px;
  color:white;
  font-size: 30px;
  letter-spacing: .2em;
  font-family: 楷体,楷体_GB2312;
}
.profile{
  /**分配剩余空间位置  <1*/
  flex-grow: 1;
  text-align: right;
}
form{
  width: auto;
  padding: 0 0px;
  box-sizing:border-box;
}
label {
  display: block;
  margin-top: 20px;
  font-size: 16px;
}
input {
  display: block;
  height: 45px;
  width: 100%;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  box-sizing:border-box;
  border: 1px solid rgb(218, 210, 210);
}
.alink {
  text-align: right;
  color: inherit;
  transition: all 0.3s;
  text-decoration: none;
  color: grey;
}
.alink:hover{
  /* 当鼠标悬停时 */
  color: #007bff;
  text-decoration: underline;
}
.bottom{
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
.selectRole{
  width: 90px;
}
::v-deep .n-base-selection.n-base-selection--selected {
  --n-border: none !important;
  --n-border-active: none !important;
  --n-border-focus: none !important;
  --n-border-hover: none !important;
  --n-box-shadow-active: none !important;
  --n-box-shadow-focus: none !important;
  --n-color-active: rgba(46, 51, 56, .09) !important;
  --n-color-hover: rgba(46, 51, 56, .09) !important;}
::v-deep .n-base-selection-label{
  background-color: transparent;}
</style>
